<template>
    <div class="more-detail">
        <mobile-top-menu :data="menuData"></mobile-top-menu>
        <template v-if="type == 'label'">
            <div class="m-d-top">
                <div class="md-t-left"><img :src="poetryList.cover ? poetryList.cover : getAssetsFile(coverUrl)" alt=""></div>
                <div class="md-t-label">{{ poetryList.type }}</div>
            </div>
            <div class="m-d-bottom">
                <div class="md-b-top">
                    <ul class="md-b-nar">
                        <li>作品</li>
                    </ul>
                </div>
                <div class="no-data" v-if="poetryList.items == undefined || poetryList.items.length < 1">暂无数据</div>
                <ul class="md-b-ul" v-else>
                    <li class="md-b-li" v-for="item in poetryList.items" :key="item.pid" @click.prevent="goToPoetryDetail(item.pid)">
                        <div class="li-top f-b-r">
                            <div class="l-title ellipsis">{{ item.p_title }}</div>
                            <div class="l-dynasty">[{{ item.p_dynasty }}]&nbsp;{{ item.a_name }}</div>
                        </div>
                        <div class="l-content ellipsis">{{ item.p_content.split('。')[0] }}。</div>
                    </li>
                </ul>
                <!-- <div class="no-data f-c-c" v-if="poetryList.length < 1">暂无诗词</div> -->
            </div>
        </template>
        <template v-if="type == 'poems'">
            <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
                <van-list v-model:loading="loading" loading-text="加载中..." :offset="0" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-cell v-for="item in poemsList" :key="item.pl_id" @click="goToPoemsDetail(item.pl_id)">
                        <div class="poems-list">
                            <div class="pl-left">
                                <img :src="(item.pl_cover &&  item.pl_cover != '无') ? item.pl_cover : getAssetsFile('cover/poems/default-poems.png')" alt="">
                            </div>
                            <div class="pl-right">
                                <div class="pl-name">{{ item.pl_name }}</div>
                                <div class="pl-creator">{{ item.nickname }}</div>
                            </div>
                        </div>
                    </van-cell>
                </van-list>
            <!-- </van-pull-refresh> -->
        </template>
    </div>
</template>

<script setup lang="ts">
import managePoetryStore from '@/page/administrator/index/page/manage-poetry/manage-poetry.store'
import { useRoute, useRouter } from 'vue-router'
import { computed, onMounted, ref } from 'vue' 
import { Cover } from '../home/home.model'
import { random } from 'lodash';
import { getAssetsFile } from '@/utils/util';
import homeStore from '../home/home.store';

const managePoetrySe = managePoetryStore()
const homeSe = homeStore()
const route = useRoute()
const router = useRouter()
const menuData = computed(() => {
    return {
        leftMsg: '返回',
        centerMsg: type == 'label' ? poetryList.value.type : '诗单'
    }
})

// 下拉刷新
// const list = ref<any>([]);
const loading = ref<boolean>(false);
const finished = ref<boolean>(false);
// const refreshing = ref<boolean>(false);
const onLoad = () => {
    pageNum.value++
    getPoetryByLid()
}

const lid = route.params.id
const type = route.params.type
let poetryList = ref<any>({})
let cover = new Cover()
let coverUrl = ref<string>('')
let poemsList = ref<any>([])
let pageNum = ref<number>(0)
let pageSize = ref<number>(30)
const getPoetryByLid = () => {
    if(type == 'label') {
        managePoetrySe.getPoetryByLid({ lid: lid }).then((res: any) => {
            if(res.status == 'success') {
                poetryList.value = res.results
                let imgList = cover.getImgList()
                let random = Math.floor(Math.random() * imgList.length)
                coverUrl.value = imgList[random]
            }
        })
    } else if(type == 'poems') {
        if(pageNum.value == 0) return
        loading.value = true
        const data = {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
        }
        homeSe.getRecommentPoemsList(data).then((res: any) => {
            if(res.status == 'success') {
                if(res.results.length <= 0) {
                    finished.value = true
                    return
                }
                res.results.forEach((item: any) => {
                    poemsList.value.push(item)
                })
                loading.value = false
            }
        })
    }
}

onMounted(() => {
    getPoetryByLid()
})

// 跳转诗歌详情
const goToPoetryDetail = (pid: number) => {
    console.log('pid', pid)
    router.push({ 
        name: 'poetryDetail',
        params: {
            id: pid
        }
    })
}

// 跳转诗单详情
const goToPoemsDetail = (pl_id: number) => {
    router.push({ 
        name: 'poemsDetail',
        params: {
            poemsId: pl_id
        }
    })
}
</script>

<style lang="less" scoped>
.more-detail {
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    background-color: var(--bg-color);
    overflow-y: auto;
    .m-d-top {
        height: max-content;
        border-bottom: 1px solid var(--border-color-gray1);
        box-sizing: border-box;
        padding: 0.75rem;
        position: relative;
        .md-t-left {
            border-radius: 50%;
            width: 5rem;
            height: 5rem;
            overflow: hidden;
            border: 1px solid var(--border-color-gray1);
            padding: 0.2rem;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .md-t-label {
            position: absolute;
            top: 2.4rem;
            margin-left: 7rem;
            font-size: 22px;
        }
    }
    .m-d-bottom {
        .md-b-top {
            height: 2.5rem;
            line-height: 2.5rem;
            border-bottom: 1px solid var(--border-color-gray1);
            .md-b-nar {
                li {
                    color: var(--content-font-color);
                    width: 50%;
                    height: 100%;   
                    text-align: center;
                    font-weight: 600;
                }
            }
        }
        .no-data {
            height: 100%;
            width: 100%;
            text-align: center;
            margin-top: 5rem;
            font-size: 16px;
            color: var(--content-font-color);
        }
        .md-b-ul {

            .md-b-li {
                padding: 0.75rem;
                box-sizing: border-box;
                border-bottom: 1px solid var(--border-color-gray1);
                .li-top {
                    height: 2rem;
                    width: 100%;
                    .l-title {
                        font-size: 16px;
                        font-weight: 600;
                        color: var(--font-color-black);
                    }
                    .l-dynasty {
                        color: var(--font-color-gray);
                    }
                    .l-content {
                        color: var(--font-color-gray);
                    }
                }

            }
        }
    }

    .poems-list {
        width: 100%;
        text-align: left;
        .pl-left {
            // border-radius: 50%;
            width: 3.5rem;
            height: 3.5rem;
            overflow: hidden;
            border: 1px solid var(--border-color-gray1);
            padding: 0.2rem;
            float: left;
            img {
                width: 100%;
                height: 100%;
                // border-radius: 50%;
            }
        }
        .pl-right {
            padding: 0.5rem 0;
            margin-left: 5rem;
            .pl-name {
                font-size: 16px;
            }
            .pl-creator, .pl-name {
                color: var(--font-color-black);
                font-size: 14px;
            }
        }
    }
}
</style>